<template>
  <div class="detail">
    <NavBar :title="hotel.homestaysName"  left-arrow @click-left="onClickLeft"></NavBar>
    <img :src="hotel.picture" alt="" />
    <div class="content">
      <h3>{{ hotel.homestaysName }}</h3>
      <p>{{ hotel.homestaysTitle }}{{ hotel.intro }}</p>
      <grid :column-num="3">
  <grid-item icon="home-o" text="整屋出租" />
  <grid-item icon="shop-o" :text="hotel.roomType" />
  <grid-item icon="gift-card-o" :text="hotel.bedNumber+'床'+hotel.personNumber+'人'" />
</grid>
<img src="../imgs/Group.png" alt="">
<!-- <h3>设施/服务</h3> -->
<cell-group>
  <cell title="设施/服务" title-style="font-weight:bolder;font-size:1.2rem" value="全部设施" is-link=""/>
  <cell title="服务" value="免费停车位 行李寄存" />
  <cell title="娱乐" value="投影设施 麻将机" />
  
</cell-group>
<!-- <h3>客房点评</h3> -->
<cell title="客房点评" title-style="font-weight:bolder;font-size:1.2rem" value="全部100条" is-link=""/>

<cell title="入住/退订" value="入住日14:00后入住，离店日12:00前离开 (以当地城市时区为准)." />
<cell title="加客费用" value="不允许加客" />
<cell title="房东要求" value="允许举办派对/活... " />
<cell title="取消规则" value="不允许加客" />

    </div>
    
    <action-bar>
      <action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <!-- <action-bar-icon icon="cart-o" text="购物车" /> -->
      <action-bar-icon icon="like-o" text="已收藏" color="#ff5000" @click="like" />
      <span>￥{{ hotel.price }}/晚</span>
      <!-- <action-bar-button type="warning" text="加入购物车" /> -->
      <action-bar-button color="#FC7992" text="立即预定" @click="btn" />
    </action-bar>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NavBar,Cell, CellGroup, ActionBar, ActionBarIcon, ActionBarButton, Toast,Grid, GridItem } from 'vant'
import { getList } from '../utils/api'
import { loadDetailAPI } from '../services/hotel'

const hotel = ref({})
const route = useRoute()
const router = useRouter()
const btn = () => {
  Toast({
    type: 'success',
    message: '预定成功',
  })
}
const loadData = async () => {
  const data = await loadDetailAPI(route.query.id)
  console.log(data)
  hotel.value = data.data
}

const onClickLeft = () => {
  router.go(-1)
}
loadData()
const toOrder = (id) => {
  router.push({
    name: 'Order',
    query: {
      id,
    },
  })
}
</script>
<style scoped>
.detail {
  position: relative;
}
.content {
  background-color: #fff;
  position: absolute;
  top: 30vh;
  border-radius: 5vw;
  padding: 3vh;
}
</style>
